<template>
  <view>
    <div class="title-h1">基本信息</div>
    <div class="flex-middle">
      <u-upload
          :fileList="fileList1"
          @afterRead="afterRead"
          @delete="deletePic"
          name="1"
          multiple
          :maxCount="10"
      ></u-upload>
      <div>点击上传头像</div>
    </div>
    <div class="input-box mb50">
      <u-input
          v-model="name"
          :maxLength="10"
          border="none"
          placeholderClass="input-placeholder"
          :placeholder="'请输入昵称'"
      ></u-input>
    </div>
    <u-cell-group  :border="false" >
      <u-cell :border="false" title="性别" :isLink="true" value="请选择"></u-cell>
      <div class="text-right">性别选择后不能更改</div>
      <u-cell :border="false" title="生日" :isLink="true" value="请选择"></u-cell>
    </u-cell-group>
    <cBtn text="下一步"></cBtn>
  </view>
</template>

<script>
import cBtn from '../../components/cBtn'
export default {
  data() {
    return {
      customStyles: {
        marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: '#ffffff',
        width: '606rpx',
        height: '88rpx',
        opacity: '1',
        margin: '100rpx auto 0',
        lineHeight: '88rpx',
        background: '#7355ff',
        borderRadius: '44rpx',

      },
      fileList1: [],
      name: ''
    };
  },
  components: {
    cBtn
  },
  methods:{
    afterRead(){

    },
    deletePic(){

    }

  }
}
</script>

<style lang="scss">
@import '../../assets/css/base.scss';
.flex-middle{
  display: flex;
  align-items: center;
  flex-direction:column;
}
.text-right{
    text-align: right;
    width: 100%;
    height: 32rpx;
    opacity: 1;
    color: #ff0000;
    font-size: 28rpx;
    font-weight: 0;
    line-height: 32rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    padding-right: 15rpx;
    box-sizing: border-box;
}
.mb50{
  margin-bottom: 50rpx;
}
.input-placeholder{
  color:red;
  text-align: center;
}
</style>
